<template>
  <div>
    <a-page-header
      title="学生评价"
      sub-title="学生对教师教学质量进行评价"
    />
    
    <a-card>
      <a-alert
        message="评价说明"
        description="请根据实际情况对任课教师的教学质量进行客观评价，您的评价将对教师改进教学提供重要参考。"
        type="info"
        show-icon
        style="margin-bottom: 24px;"
      />
      
      <a-tabs defaultActiveKey="1">
        <a-tab-pane key="1" tab="待评价课程">
          <a-table
            :columns="pendingColumns"
            :dataSource="pendingData"
            rowKey="id"
            :pagination="false"
          >
            <template slot="action" slot-scope="text, record">
              <a-button type="primary" size="small" @click="startEvaluate(record)">开始评价</a-button>
            </template>
          </a-table>
        </a-tab-pane>
        
        <a-tab-pane key="2" tab="已评价课程">
          <a-table
            :columns="completedColumns"
            :dataSource="completedData"
            rowKey="id"
            :pagination="false"
          >
            <template slot="score" slot-scope="text">
              <a-tag :color="getScoreColor(text)">{{text}}</a-tag>
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button type="link" size="small" @click="viewEvaluate(record)">查看详情</a-button>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    
    <a-modal
      title="教学质量评价"
      :visible="evaluateModalVisible"
      :width="800"
      :footer="null"
      @cancel="evaluateModalVisible = false"
    >
      <evaluate-form 
        v-if="evaluateModalVisible"
        :course="currentCourse"
        @submit="handleEvaluateSubmit"
        @cancel="evaluateModalVisible = false"
      />
    </a-modal>
  </div>
</template>

<script>
import EvaluateForm from './EvaluateForm'

export default {
  components: {
    EvaluateForm
  },
  data() {
    return {
      pendingColumns: [
        {
          title: '课程名称',
          dataIndex: 'courseName',
          key: 'courseName'
        },
        {
          title: '教师姓名',
          dataIndex: 'teacherName',
          key: 'teacherName'
        },
        {
          title: '开课部门',
          dataIndex: 'department',
          key: 'department'
        },
        {
          title: '学分',
          dataIndex: 'credit',
          key: 'credit'
        },
        {
          title: '评价截止时间',
          dataIndex: 'deadline',
          key: 'deadline'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pendingData: [
        {
          id: '1',
          courseName: '高等数学',
          teacherName: '王芳',
          department: '机电工程系',
          credit: 4,
          deadline: '2023-06-30'
        },
        {
          id: '2',
          courseName: 'PLC与工业控制技术',
          teacherName: '李廷',
          department: '机电工程系',
          credit: 3,
          deadline: '2023-06-30'
        },
        {
          id: '3',
          courseName: '计算机基础',
          teacherName: '王雪',
          department: '信息工程系',
          credit: 2,
          deadline: '2023-07-10'
        }
      ],
      completedColumns: [
        {
          title: '课程名称',
          dataIndex: 'courseName',
          key: 'courseName'
        },
        {
          title: '教师姓名',
          dataIndex: 'teacherName',
          key: 'teacherName'
        },
        {
          title: '开课部门',
          dataIndex: 'department',
          key: 'department'
        },
        {
          title: '评价分数',
          dataIndex: 'score',
          key: 'score',
          scopedSlots: { customRender: 'score' }
        },
        {
          title: '评价时间',
          dataIndex: 'evaluateTime',
          key: 'evaluateTime'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      completedData: [
        {
          id: '4',
          courseName: '线性代数',
          teacherName: '赵老师',
          department: '机电工程系',
          score: 92,
          evaluateTime: '2023-06-15'
        },
      ],
      evaluateModalVisible: false,
      currentCourse: null
    }
  },
  methods: {
    getScoreColor(score) {
      if (score >= 90) return 'green'
      if (score >= 80) return 'blue'
      if (score >= 70) return 'yellow'
      if (score >= 60) return 'orange'
      return 'red'
    },
    startEvaluate(record) {
      this.currentCourse = record
      this.evaluateModalVisible = true
    },
    viewEvaluate(record) {
      this.$router.push(`/evaluate/detail/${record.id}`)
    },
    handleEvaluateSubmit(values) {
      // 模拟提交评价
      this.$message.success('评价提交成功')
      this.pendingData = this.pendingData.filter(item => item.id !== this.currentCourse.id)
      this.completedData.unshift({
        ...this.currentCourse,
        score: values.totalScore,
        evaluateTime: new Date().toLocaleDateString()
      })
      this.evaluateModalVisible = false
    }
  }
}
</script>